Ext.onReady(function(){
    /******
     ****** host holds the name of my host computer.  I did this because of restrictions on making remote data requests.  If the 
     ****** host is localhost, things look great from my development machine.  If I try to view my page from another computer,
     ****** though, I get errors and nothing happens.  I set my host to tc-mark-lap (the name of my development computer).  If I 
     ****** view my page with localhost in the url, I get an error.  If I view it with tc-mark-lap, everything works.  This way,
     ****** I can view pages from my laptop or from a remote machine.  I'll have to remember to change this when I deploy to my
     ****** production server, though.  I might be able to set this in my controller or in a config table and use the javascript
     ****** helper to set it at runtime.  I'll have to check on that sometime.
     ******/

    var host = 'localhost';

    //This is the datastore.  My json data will be loaded remotely, then stored in the datastore.  
    //I used the HttpProxy because I'm accessing data on my local machine
    //In my json reader, I define the fields I should get from my json data (id, last_name, first_name, etc.
    var ds = new Ext.data.Store({	
        proxy: new Ext.data.HttpProxy({url: 'http://'+host+'/containers/getAllContainers'}),  //note that I used host in the url
        reader: new Ext.data.JsonReader({
        root: 'containers',
		totalProperty: 'total',
		fields: [
			{name: 'cod_codigo'},
			{name: 'cot_codigo'},
			{name: 'con_owner'},
			{name: 'con_prefix'},
			{name: 'con_number'},
			{name: 'con_isocode'},
			{name: 'con_mgw'},
			{name: 'con_machinetype'},
			{name: 'con_machinemodel'},
			{name: 'con_machinegas'},
			{name: 'con_onhdate'},
			{name: 'con_lastrepairdate'},
			{name: 'con_estado'}
		]
		})
    });  

    //This is the column model.  This defines the columns in my datagrid.
    //It also maps each column with the appropriate json data from my database (dataIndex).
    var cm = new Ext.grid.ColumnModel([
        {header: "Codigo", dataIndex: 'cod_codigo', width: 100, hidden: false, sortable: true},
		{header: "Tipo", dataIndex: 'cot_codigo', width: 100},
		{header: "Propietario", dataIndex: 'con_owner', width: 100},
		{header: "Prefijo", dataIndex: 'con_prefix', width: 100},
		{header: "Numero", dataIndex: 'con_number', width: 100},
		{header: "ISO-Code", dataIndex: 'con_isocode', width: 100},
		{header: "MGW", dataIndex: 'con_mgw', width: 100},
		{header: "M-Type", dataIndex: 'con_machinetype', width: 100},
		{header: "M-Model", dataIndex: 'con_machinemodel', width: 100},
		{header: "M-Gas", dataIndex: 'con_machinegas', width: 100},
		{header: "On-Hire", dataIndex: 'con_onhdate', width: 100},
		{header: "Off-Hire", dataIndex: 'con_lastrepairdate', width: 100},
		{header: "Estado", dataIndex: 'con_estado', width: 100}
    ]);

    //Here's where we define our datagrid.  
    //We have to specify our dataStore and our columnModel.
    var grid = new Ext.grid.GridPanel({
		ds: ds,
		cm: cm,
		stripeRows: true,
		autoHeight: true,
		//height: 350,
		width: 675,
		title: 'Data Grid'
    });

    ds.load(); //This loads data from the database into the datastore.

	grid.render('grid-paging');  //This renders our grid to the grid-paging div in our index.ctp view.
})